 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">基本信息</div>
      </div>
      <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" class="content-con margin">
        <div class="form-item">
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="account">
                <Row>
                  <i-col span="8" class="ban-left">
                    商户名称
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.account" size="large" placeholder="输入商户名"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="nickname">
                <Row>
                  <i-col span="8" class="ban-left">
                    用户名
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.nickname" size="large"  placeholder="输入用户名"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="phone">
                <Row>
                  <i-col span="8" class="ban-left">
                    手机号
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.phone" size="large" placeholder="输入手机号"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="recharge_rate">
                <Row>
                  <i-col span="8" class="ban-left">
                    充值费率(%)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.recharge_rate" size="large" placeholder="输入充值费率(%)"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="sing_fee">
                <Row>
                  <i-col span="8" class="ban-left">
                    转账单笔手续费(元/笔)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.sing_fee" size="large" placeholder="输入代付每笔手续费"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="transfer_rate">
                <Row>
                  <i-col span="8" class="ban-left">
                    转账费率(%)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.transfer_rate" size="large" placeholder="输入转账费率(%)"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="status">
                <Row>
                  <i-col span="8" class="ban-left">
                    商户状态
                  </i-col>
                  <i-col span="16" style="padding-left: 15px;">
                    <Radio-group v-model="formValidate.status" size="large">
                      <Radio label="0">
                          <span>启用</span>
                      </Radio>
                      <Radio label="1">
                          <span>停止</span>
                      </Radio>
                    </Radio-group>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
        </div>
        <div class="key">所有密码默认为：abc123456</div>
        <Form-item class="ban-btn">
          <i-button @click="handleSubmit()" class="save" size="large">保存</i-button>
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </Form-item>
      </i-form>
   </Card>

 </template>
<script>
import { add } from '@/api/merchants'
import { mapMutations } from 'vuex'
export default {
  name: 'mer-add',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
	   formValidate: {
	     account: '',
	     nickname: '',
	     phone: '',
	     recharge_rate: '0',
	     sing_fee: '',
	     transfer_rate: '',
	     status: '0'
	   },
	   ruleValidate: {
	     account: [
	       {
	         required: true,
	         message: '输入商户名',
	         trigger: 'blur'
	       }
	     ],
	     nickname: [
	       {
	         required: true,
	         message: '输入用户登录名',
	         trigger: 'blur'
	       }
	     ],
	     phone: [
	       {
	         required: true,
	         message: '输入手机号',
	         trigger: 'blur'
	       }
	     ],
	     recharge_rate: [
	       {
	         required: true,
	         message: '输入充值费率',
	         trigger: 'blur'
	       }
	     ],
	     sing_fee: [
	       {
	         required: true,
	         message: '输入代付每笔手续费',
	         trigger: 'blur'
	       }
	     ],
	     transfer_rate: [
	       {
	         required: true,
	         message: '输入代付每笔转账费率',
	         trigger: 'blur'
	       }
	     ],
	     status: [
	       {
	         required: true,
	         message: '请选择状态',
	         trigger: 'change'
	       }
	     ]
	    }
    }
  },
  methods: {
    // 关闭标签页
    ...mapMutations([
      'closeTag'
    ]),
    close () {
      this.closeTag({
        name: 'mer-add'
      })
    },
    // 返回按钮
    btnClick1 () {
      this.close()
    },
	 // 表单验证
	 handleSubmit () {
	   this.$refs['formValidate'].validate((valid) => {
	     if (valid) {
          add(this.formValidate).then(res => {
            this.$Message.success(res.msg)
            this.close()
          }).catch(err => {
            this.$message.error(err.msg)
          })
	     } else {
	       this.$Message.error('表单验证失败!')
	     }
	   })
	 }
  }
}
</script>
 <style lang="less">
   .margin{
     margin-bottom: 20px !important;
   }
   .ban-left1{
     padding: 8px 15px;
     height: 36px;
     line-height: 20px;
    }
    .key{
      color: darkred;
      margin-top: 15px;
    }
 </style>
